<template>
  <view class="order_management">
    <view class="tab_nav">
      <nav-bar
        nav_btn="back"
        :index="index"
        @onPicker="getPicker"
        :title="title"
        :showPicker="showPicker"
        :color="color"
        :placeholder="placeholder"
        :list="list"
        :auto_img="image"
        :background="background"
      ></nav-bar>
    </view>

    <view class="header_share w750 flex">
      <input
        class="uni_ipt"
        type="text"
        v-model="keyword"
        value=""
        placeholder-style="color: #CCCCCC;"
        placeholder-class="s24 f500 family"
        placeholder="搜索"
      />
    </view>

    <view class="menu" @click="gotoReview">
      <view class="left">
        <view class="img">
          <image
            src="@/static/orderSh.png"
            style="width: 100%; height: 100%"
          ></image>
        </view>
        <view class="text">订单推荐审核</view>
      </view>
      <view class="right">
        <uni-badge size="normal" :text="badge" type="error" />
        <uni-icons type="arrow-right" size="20" color="#999"></uni-icons>
      </view>
    </view>
    <view class="item" v-for="(item, index) in listData" :key="index">
      <view class="box">
        <view class="warp" style="margin-bottom: 10rpx">
          <view class="left">
            <view class="head">
              <view>
                <image
                  :src="item.reff_user.avatar"
                  style="width: 90rpx; height: 90rpx; border-radius: 50%"
                ></image>
              </view>
              <view style="margin-left: 20rpx">
                <view class="text1">
                  {{ item.reff_user.name }}
                </view>
                <view class="text2">
                  {{ item.reff_user.mobile }}
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="shje">
              {{ item.status == 1 ? "+" : "+" }}
              {{ item.rebeat }}
            </view>
            <view
              class="shstatus"
              :style="item.status == 2 ? 'color:#E92727;' : ''"
            >
              <uni-icons
                type="checkmarkempty"
                size="18"
                v-if="item.status == 1"
                style="vertical-align: middle"
                color="#6ec844"
              ></uni-icons>
              <uni-icons
                type="closeempty"
                size="18"
                v-if="item.status == 2"
                style="vertical-align: middle"
                color="red"
              ></uni-icons>
              <text v-if="item.status != 7">{{
                item.status == 1 ? "审核通过" : "拒绝了请求"
              }}</text>
              <text v-else style="color: #999999">订单已取消</text>
            </view>
          </view>
        </view>
        <view class="warp info">
          <view class="left infoText"
            >身份:{{ item.reff_user.identity_name }}</view
          >
          <view class="right infoText">
            {{ item.createtime }}
          </view>
        </view>
        <view class="warp info">
          <view class="left infoText"
            >订单号:{{ item.order_info.order_no }}</view
          >
          <view class="right infoText"
            >商品金额:{{ item.order_goods_info.price }}元</view
          >
        </view>
        <view class="warp info">
          <view class="left infoText text-overflow1" style="width: 96%"
            >商品名称：{{ item.order_goods_info.title }}</view
          >
          <view class="right infoText" style="width: 4%"
            >x{{ item.order_goods_info.number }}</view
          >
        </view>
        <view class="warp info">
          <view class="left infoText">提交人:{{ item.sub_user.name }}</view>
          <view class="right infoText"
            >审核人:{{ item.ex_user.name ? item.ex_user.name : "暂无" }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      badge: 0,
      listData: [],
      list: [],
      background: "#ffffff",
      showPicker: true,
      shopId: 0,
      index: 0,
      title: "",
      image: "../static/tab_jian.png",
      color: "black",
    };
  },
  onLoad(option) {
    this.shopId = option.shopId;
    this.index = option.index;
  },
  onShow() {
    this.getShopList();
    this.getBadge();
  },
  methods: {
    //获取店铺列表
    getShopList() {
      this.$request({
        url: "wedding/shop_list",
        method: "POST",
        data: {
          keyword: "",
          type: 1,
        },
      }).then((res) => {
        this.list = res.data.data;
      });
    },
    // 获取店铺id
    getPicker(data) {
      this.shopId = this.list[data].id;
      this.index = data;
      this.getBadge();
    },
    // 获取角标
    getBadge() {
      this.$request({
        url: "shop/get_order_recomm",
        method: "POST",
        data: {
          shop_id: this.shopId,
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          this.badge = res.data.data.nums;
          this.listData = res.data.data.list;
        }
      });
    },
    gotoReview() {
      uni.navigateTo({
        url: "./review?shopId=" + this.shopId,
      });
    },
    handelOrderInfo(item) {
      uni.navigateTo({
        url: `/pages/filePages/storeDetails/storeDetails?data=${JSON.stringify(
          item
        )}&state=1`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order_management {
  overflow: hidden;
  padding-bottom: 50upx;
  background-color: #ffffff;

  .tab_nav {
    background-color: #ffffff;
  }

  .header_share {
    height: 94upx;
    background: #ffffff;
    overflow: hidden;

    .uni_ipt {
      height: 68upx;
      background: #f3f3f3;
      border-radius: 8upx 8upx 8upx 8upx;
      margin-left: 32upx;
      margin-top: 12upx;
      padding-left: 78upx;
    }

    .search_img {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      left: 50rpx;
      margin-top: 28rpx;
    }

    .search_btn {
      width: 116upx;
      height: 68upx;
      background: #e0a76d;
      border-radius: 34upx 34upx 34upx 34upx;
      line-height: 68upx;
      color: #ffffff;
      margin-top: 10upx;
      margin-left: 32upx;
    }
  }

  .head_riqi_box {
    height: 94upx;
    background: #ffffff;

    /deep/ .uni-date {
      width: 290upx;
      height: 50upx;
      background: #f3f3f3;
      border-radius: 58upx 58upx 58upx 58upx;
    }

    /deep/ .uni-date-x--border {
      border: none !important;
    }

    /deep/ .uni-date-x {
      margin-top: 6upx;
    }

    .zhi_txt {
      color: #999999;
      line-height: 94upx;
    }

    .shaixuan_btn {
      width: 104upx;
      height: 50upx;
      background: #666666;
      border-radius: 25upx 25upx 25upx 25upx;
      line-height: 50upx;
      color: #ffffff;
      margin-top: 18upx;
      margin-left: 6upx;
    }
  }

  .list_box {
    width: 686upx;
    background: #ffffff;
    margin-top: 20upx;
    padding: 32upx 32upx 0 32upx;

    .state_txt {
      color: #000000;
    }

    .state_zhifu {
      color: #ff3f4a;
    }

    .xdr_phone_box {
      width: 642upx;
      height: 36upx;
      background: #f4f5f9;
      border-radius: 8upx 8upx 8upx 8upx;
      padding: 12upx 22upx 12upx 22upx;
      margin-top: 24upx;

      .xdr_txt {
        color: #999999;
      }

      .phone_txt {
        color: #999999;
      }
    }

    .goods_img_name_money {
      margin-top: 40upx;

      .goods_img {
        width: 116upx;
        height: 116upx;
        border-radius: 8upx;
        overflow: hidden;
      }

      .goods_name {
        width: 350rpx;
        color: #333333;
        margin-left: 26upx;
        margin-top: 22upx;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .goods_money_box {
        margin-top: 18upx;
        margin-left: 110upx;

        .goods_money_top {
          color: #000000;
        }

        .goods_num {
          color: #666666;
          margin-top: 10upx;
        }
      }
    }

    .edit_state_box {
      margin-top: 18upx;
      right: 0;
      padding-bottom: 20upx;
      display: flex;
      justify-content: flex-end;

      .edit_money {
        width: 157upx;
        height: 58upx;
        border-radius: 30upx 30upx 30upx 30upx;
        line-height: 58upx;
        border: 1upx solid #cccccc;
        margin-right: 18upx;
      }
    }
  }
}

page {
  background-color: rgba(244, 245, 249, 1);
}

.header_share {
  height: 94upx;
  background: #ffffff;
  width: 94%;
  margin: 0 auto;

  .uni_ipt {
    width: 100%;
    height: 68upx;
    background: #f3f3f3;
    border-radius: 8rpx;
    margin-top: 12upx;
    padding-left: 28upx;
  }
}

.menu {
  width: 94%;
  height: 124rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .left {
    width: 70%;
    display: flex;
    align-items: center;
    .img {
      width: 84rpx;
      height: 84rpx;
    }
    .text {
      font-size: 32rpx;
			font-weight: bold;
      color: #333;
      margin-left: 20rpx;
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30%;
    height: 124rpx;
		/deep/.uni-badge--x{
			vertical-align: top;
		}
  }
}

.item {
  width: 100%;
  padding-top: 30rpx;
  border-top: 2px solid rgba(244, 245, 249, 1);
  padding-bottom: 20rpx;
  .box {
    width: 94%;
    margin: 0 auto;
    .head {
      display: flex;
      align-items: center;
      .text1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
      }
      .text2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        line-height: 36rpx;
      }
    }
    .shje {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
    }
    .shstatus {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #6ec844;
      font-size: 24rpx;
      margin-top: 10rpx;
    }

    .info {
      margin-top: 20rpx;
      .infoText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 34rpx;
      }
    }
    .warp {
      width: 100%;
      display: flex;
      .left {
        width: 50%;
      }
      .right {
        width: 50%;
        text-align: right;
      }
    }
  }
}
</style>
